<template>
  <div class="category-card-box">

    <div class="category-background" :style="{backgroundImage:`${data.item.bgColor}`}"></div>
    <div class="category-label">
      {{ data.item.label }}
    </div>
    <img class="category-image" :src="data.item.image" alt=""/>
  </div>
</template>

<script lang="ts" setup>
const data = defineProps({
  item: {
    required: true,
    type: Object,
  }
})
</script>

<style lang="less" scoped>
.category-background:hover{
  box-shadow: rgba(0, 0, 0, 0.2) 0 20px 30px;
}
.category-card-box {
  width: 100%;
  height: 100%;
  cursor:pointer;
  position: relative;

  .category-background {
    width: 100%;
    height: 80%;
    position: absolute;
    border-radius: 10px;
    bottom: 0;
    left: 0;
  }

  .category-label {
    color: white;
    position: absolute;
    font-size: 20px;
    bottom: 20px;
    right: 20px;
  }

  .category-image {
    position: absolute;
    left: 20px;
    width: 36px;
    height: 36px;
    top: 5px;
    transform-style: preserve-3d;
    transform: rotate(-30deg);
  }

}
</style>